<template>
	<view class="mybox">
		<ul>
			<li class="mb-item">
				<div class="myboxItem mi">
					<div class="mi-pic">
						<div class="red-box">
							<image class="blockImg" :src="imgSrcWithTime('https://dummmyimage.com')"></image>
						</div>
						<div class="red-box">
							<image class="blockImg" :src="imgSrcWithTime('https://dummmyimage.com')"></image>
						</div>
						<div class="red-box">
							<image class="blockImg" :src="imgSrcWithTime('https://dummmyimage.com')"></image>
						</div>
						<div class="red-box">
							<image class="blockImg" :src="imgSrcWithTime('https://dummmyimage.com')"></image>
						</div>
						<div class="red-box">
							<image class="blockImg" :src="imgSrcWithTime('https://dummmyimage.com')"></image>
						</div>
						<div class="red-box">
							<image class="blockImg" :src="imgSrcWithTime('https://dummmyimage.com')"></image>
						</div>
					</div>
					<div class="mi-info">
						<div class="mi-title">内容</div>
						<div class="mi-subtitle">子内容</div>
					</div>
				</div>
			</li>
		</ul>
		{{ a }} + {{ b }} = {{ c }}
		<button @click="add">测试成功</button>
	</view>
</template>
<script>
export default {
	data() {
		return {
			a: 1,
			b: 2
		}
	},
	computed: {
		c() {
			return this.a + this.b;
		}
	},
	methods: {
		add() {
			this.a++;
		},
		imgSrcWithTime(src) {
			const t = Date.now();
			if (src.includes('?')) {
				return src + '&t=' + t;
			} else {
				return src + '?t=' + t;
			}
		}
	},
	mounted() {
		this.add();
	}
}
</script>
<style>
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}

.mybox {
	display: flex;
	justify-content: space-between;
	color: red;
	border: 1px solid #000;
	/* animation: animateMove 2s linear infinite; */
}

.red-box {
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-top: 10px;
}

@keyframes animateMove {
	0% {
		transform: scale(0)
	}

	100% {
		transform: scale(1);
	}
}
</style>